<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="600" height="200"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    var canvas=document.querySelector("#canvas")
    var ctx=canvas.getContext("2d")
    var i=0
    function rend(){
      i++
      if(i>1024){
        i=0
        console.log("111");
      }
    //   if(i>=424){
    // var img=new Image()
    // img.src="./img/quan.jpg"
    // img.onload=function(){
    //   ctx.drawImage(img,i,1024-i,1024-i,200,0,0,1024-i,200)
    // }
    //     // i=0
    // console.log(i);
    // var img2=new Image()
    // img2.src="./img/quan.jpg"
    // img2.onload=function(){
    //   ctx.drawImage(img2,0,i-424,600-i+424,200,0,i-424,i-424,600-i+424)
    // }

    //   }
      // else{
        ctx.beginPath()
        var img=new Image()
    img.src="./img/quan.jpg"
    img.onload=function(){
      ctx.drawImage(img,i,0,600,200,0,0,600,200)
    }
    ctx.closePath()
        ctx.beginPath()
        var img2=new Image()
    img2.src="./img/quan.jpg"
    img2.onload=function(){
      ctx.drawImage(img2,i-1024,0,600,200,0,0,600,200)
    }
    ctx.closePath()
      // }
      
    requestAnimationFrame(rend)
    }
    rend()
    
  </script>
</body>
</html>